<!--新建广告-->
<template>
  <div class="storePromotion">
    <el-row class="top bgcolor1 font_size3 font_color1">
      <el-col :span="24">
        <span>新建／编辑</span>
      </el-col>
    </el-row>
    <div class="content bgcolor1">
      <el-form ref="form" :model="form" label-width="120px" style="width: 500px;">
        <el-form-item label="广告名称:" class="adv-item" required>
          <el-input v-model="form.name" placeholder="请输入广告名称" type="text" :maxlength=Number(10)></el-input>
        </el-form-item>
        <el-form-item label="投放位置:" class="adv-item" required>
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="0" name="type">首页bananer</el-checkbox>
            <el-checkbox label="2" name="type">商家列表bananer</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="显示时间:" class="adv-item" required>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions0" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line " :span="2" style="text-align:center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions0" v-model="form.date2"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="广告图片:" class="adv-item" required>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="form.advUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList">
            <el-button class="pushBtn">
              <span @click="adv_photo"> <i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>
          </el-upload>
        </el-form-item>
        <p style="margin: -20px 0 10px 18px;"><span style="color: red;display: inline-block;margin-right: 5px;">*</span>以下信息为非必填项，三选一
        </p>
        <el-form-item label="详情图片:"  style="margin-bottom: 10px;">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="form.advUrl"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :on-success="handleSuccess1"
            :before-upload="beforeAvatarUpload1"
            :file-list="fileList1">
            <el-button class="pushBtn">
            <span @click="adv_photo1"> <i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <!--<div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>-->
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转商家:"  style="margin-bottom: 20px;">
          <el-button class="comfirmBtn" @click="storeTZ" style="width: 100px;">+关联店铺</el-button>
          <span class="span1" style="padding-left: 8px;" v-if="num==2">{{storeN}}</span>
        </el-form-item>
        <el-form-item label="跳转商品详情:"  style="margin-bottom: 20px;">
          <el-button class="comfirmBtn" @click="goodsTZ" style="width: 100px;">+关联商品</el-button>
          <span class="span1" style="padding-left: 8px;" v-if="num==3">{{storeN}}  {{goodsN}}</span>
        </el-form-item>
        <el-form-item label="商品详情图片:" class="adv-item" required v-if="goodsN&&num==3">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="form.advUrl2"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList2">
            <el-button class="pushBtn">
              <span @click="adv_photo2"> <i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button class="cancleBtn" @click="goBack">取消</el-button>
          <el-button class="comfirmBtn" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--错误提示弹框-->
    <div class="mask" v-if="errShow"></div>
    <el-dialog style="text-align: center;position: absolute;" :visible.sync="errShow" size="tiny" :modal="false"
               :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">{{errTips}}</span>
      <span slot="footer" class="dialog-footer">
                  <el-button @click="errShow=false" class="comfirmBtn">确 定</el-button>
                </span>
    </el-dialog>

    <el-dialog style="text-align: center;position: absolute;width: 100%;" :visible.sync="dialogVisibleGL" size="tiny" :modal="false"
               :close-on-click-modal="false" :id="storeTz&&num==3?'dsGL':''">

      <el-row>
        <el-col :span="storeTz&&num==3?12:24">
          <div class="heig75">
            <span class="span1" style="padding-left: 8px;">跳转商家：</span>
            <el-select v-model="storeTz" placeholder="全部" class="y_select inputC" filterable
                       :style="storeTz&&num==3?'width: 60%;':'width: 30%;'">
              <el-option
                v-for="item in storePromotion"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12" v-if="storeTz!=''&&num==3">
          <div class="heig75">
            <span class="span1" style="padding-left: 8px;">跳转商品：</span>
            <el-select v-model="goodsTz" placeholder="全部" class="y_select inputC" filterable
                       style="width: 60%;">
              <el-option
                v-for="item in goodsPromotion"
                :key="item.goodsId"
                :label="item.name"
                :value="item.goodsId">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="cencelTz" class="cp_qx">取 消</el-button>
                  <el-button type="primary" @click="dialogVisibleGL = false" class="cp_qx">确 定</el-button>
                </span>
    </el-dialog>
    <div class="mask" v-if="dialogVisibleGL"></div>

  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
//        options: [],
//        value:'',
        dialogVisibleGL: false,
        settleStatus: "",
        settleStatusArr: [],
        fileList: [],
        fileList2: [],
        form: {
          name: '',
          type: [],
          date1: '',
          date2: '',
          advUrl: '',
          advUrl1: '',
          advUrl2: '',
        },
        photo_url: '',
        storeId: '',
        errTips: '',
        errShow: false,
        advImgUrl: "",
        advImgUrl1: '',
        goodsDUrl:'',
        fileList1: [],
        goodsTz: '',
        storeTz: '',
        num: 0,
        storePromotion: [],
        goodsPromotion:[],
        storeN:"",
        goodsN:""
      }
    },
    watch: {
      storeTz(value){
        if (value) {
          this.$http.get(`${this.$store.state.path}goods/v2/page/${value}`)//查询小区商户
            .then(res => {
              if (res.body.result) {
                  this.goodsPromotion =res.body.result.goodsList
              }
              if (!res.body.result) {

              }
            }, res => {

            })
          this.$http.get(`${this.$store.state.path}stores/${value}`)//查询小区商户
            .then(res => {
              if (res.body.result) {
                this.storeN =res.body.result.storeName
              }
              if (!res.body.result) {

              }
            }, res => {

            })
        }
      },
      goodsTz(value){
          if(value){
            this.$http.get(`${this.$store.state.path}goods/v2/${value}`)//查询小区商户
              .then(res => {
                if (res.body.result) {
                  this.goodsN =res.body.result.name
                }
                if (!res.body.result) {

                }
              }, res => {

              })
          }
      }
    },
    methods: {
      goodsTZ(){
        this.num=3
        this.$store.state.loadingFlag = true
        this.dialogVisibleGL = true
        this.storePromotion = []
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.storeTz = "";
        this.$http.get(`${this.$store.state.path}stores/community/filter?communityId=${this.$store.state.storeId}&page=0&size=10000&merchantType=0&status=0`)//查询小区商户
          .then(res => {
            this.$store.state.loadingFlag = false
            if (res.body.result) {
              this.storePromotion = res.body.result.storeResponseDTOList;
              if (!this.storePromotion.length) {

              }
            }
            if (!res.body.result) {
              this.storePromotion = []
            }
          }, res => {

          })
      },
      storeTZ(){
        this.num=2
        this.$store.state.loadingFlag = true
        this.dialogVisibleGL = true
        this.storePromotion = []
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.goodsTz = "";
        this.$http.get(`${this.$store.state.path}stores/community/filter?communityId=${this.$store.state.storeId}&page=0&size=10000&merchantType=0&status=0`)//查询小区商户
          .then(res => {
            this.$store.state.loadingFlag = false
            if (res.body.result) {
              this.storePromotion = res.body.result.storeResponseDTOList;

            }
            if (!res.body.result) {
              this.storePromotion = []
            }
          }, res => {

          })
      },
      cencelTz(){
        this.dialogVisibleGL = false
        this.goodsTz = this.storeTz =  this.goodsN = this.storeN = ``
      },
      handlePreview(file) {
      },
      handlePreview1(file) {
      },
      handleRemove(file, fileList) {
        this.advImgUrl = "";
        this.fileList = [];
      },
      handlePreview2(file) {
      },

      handleRemove2(file, fileList) {
        this.goodsDUrl = "";
        this.fileList2 = [];
      },
      handleSuccess2(response, file, fileList){
        this.goodsDUrl = response.result;
        this.$http.get(`${this.$store.state.path}goods/v2/${this.goodsTz}`)//查询商品
          .then(res => {
            if (res.body.result) {
              let json = {
                "goodsDetail": this.goodsDUrl,
                "storeId":this.storeTz
              }
              this.$http.put(`${this.$store.state.path}goods/v2/edit/${this.goodsTz}`,json)//修改商品详情
                .then(res => {
                  if (res.body.result) {

                  }
                  if (!res.body.result) {

                  }
                }, res => {

                })
            }
            if (!res.body.result) {

            }
          }, res => {

          })
      },
      adv_photo2(){
        this.goodsDUrl = "";
        this.fileList2 = [];
        this.form.advUrl2 = `${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },
      handleSuccess(response, file, fileList){
        this.advImgUrl = response.result;
      },
      beforeAvatarUpload(file) {
        var isJPG = file.type == 'image/jpeg';
        var isPNG = file.type == 'image/png';
        if (!isJPG && !isPNG) {
          this.errTips = '广告图非图片格式不能上传'
          this.errShow = true;
          return false;
        }
      },

      handleRemove1(file, fileList) {
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.num=0

      },
      handleSuccess1(response, file, fileList){
        this.advImgUrl1 = response.result;
        this.num=1
      },
      beforeAvatarUpload1(file) {
        var isJPG = file.type == 'image/jpeg';
        var isPNG = file.type == 'image/png';
        if (!isJPG && !isPNG) {
          this.errTips = '广告图非图片格式不能上传'
          this.errShow = true;
          return false;
        }
      },

      adv_photo(){
        this.advImgUrl = "";
        this.fileList = [];
        this.form.advUrl = `${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },
      adv_photo1(){
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.goodsTz = "";
        this.storeTz = "";
        this.form.advUrl1 = `${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },

      goBack(){
        this.$router.back(-1);//返回
      },
      onSubmit() {
        let form = this.form;
        let startTime = this.form.date1;
        let endTime = this.form.date2;
        if (form.name == '') {
          this.errTips = '广告名称不能为空'
          this.errShow = true;
          return false;
        }
        if (form.type.length == 0) {
          this.errTips = '请选择广告投放位置'
          this.errShow = true;
          return false;
        }
        if (form.date1 == '') {
          this.errTips = '请选择开始时间'
          this.errShow = true;
          return false;
        }
        if (form.date2 == '') {
          this.errTips = '请选择结束时间'
          this.errShow = true;
          return false;
        }
        if (form.date1 > form.date2) {
          this.errTips = '开始时间不能大于结束时间'
          this.errShow = true;
          return false;
        }
        if (this.advImgUrl == "") {
          this.errTips = '请上传广告图片'
          this.errShow = true;
          return false;
        }
        if (this.num == 3&&!this.goodsTz) {
          this.errTips = '请关联一个商品'
          this.errShow = true;
          return false;
        }
        if (this.num == 3&&!this.goodsDUrl) {
          this.errTips = '请上传商品详情图片'
          this.errShow = true;
          return false;
        }
        let adv_types = form.type.join(';')
        let yy1 = startTime.getFullYear();
        let mm1 = startTime.getMonth() + 1;
        let dd1 = startTime.getDate();
        let yy2 = endTime.getFullYear();
        let mm2 = endTime.getMonth() + 1;
        let dd2 = endTime.getDate();
        if ((mm1 < 10) || (mm2 < 10)) {
          mm1 = "0" + String(mm1);
          mm2 = "0" + String(mm2);
        }
        if ((dd1 < 10) || dd2 < 10) {
          dd1 = "0" + String(dd1);
          dd2 = "0" + String(dd2);
        }
        startTime = String(yy1) + '-' + String(mm1) + '-' + String(dd1);
        endTime = String(yy2) + '-' + String(mm2) + '-' + String(dd2);
        let json = {};
        let type_ = ``
        let detail_ =``
        if(this.num==0){
          type_=0
          detail_ = ``
        }
        if(this.num==1){
          type_=0
          detail_ = this.advImgUrl1
        }
        if(this.num==2){
          type_=2
          detail_ = this.storeTz
        }
        if(this.num==3){
          type_=1
          detail_ = this.goodsTz
        }
        json = {
          "advTypes": adv_types,
          "detail": detail_,
          "detailType": type_,
          "endTime": endTime,
          "imageUrl": this.advImgUrl,
          "name": form.name,
          "sort": 0,
          "startTime": startTime,
          "storeId": this.storeId
        }
        this.$http.post(`${this.$store.state.path}/advert/`, json)
          .then(res => {
            this.$router.push({path: '/advertList/'});//去广告列表路由
          }, res => {
          })
      },

    },
    created(){
      this.photo_url = this.$store.state.photo_path;
      this.storeId = this.$store.state.storeId;
    }
  }
</script>
<style scoped>
  .font_color1 {
    color: #597380;
  }

  .font_color2 {
    color: #fff;
  }

  .font_color3 {
    color: #FF8761;
  }

  .font_size1 {
    font-size: 14px;
  }

  .font_size2 {
    font-size: 16px;
  }

  .font_size3 {
    font-size: 18px;
  }

  .bgcolor1 {
    background-color: #fff;
  }

  .bgcolor2 {
    background-color: #57BDDE;
  }

  .bgcolor3 {
    background-color: #ECEEF2;
  }

  .storePromotion {
    font-family: MicrosoftYaHei;
    padding-left: 200px;
    background-color: #F5F5F5;
  }

  .storePromotion .top {
    height: 70px;
    line-height: 70px;
  }

  .storePromotion .top span {
    display: inline-block;
    width: 150px;
    height: 100%;
    line-height: 80px;
    text-align: center;
    border-right: 1px solid #D7D9DD;
  }

  .storePromotion .content {
    margin: 36px 23px 356px 22px;
    height: 80%;
    overflow: auto;
    padding: 40px 0 0 143px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .storePromotion .content .adv-item {
    /*display:flex;*/
    /*flex-direction:row;*/
    /*flex-wrap:nowrap;*/
    margin-bottom: 31px;
  }

  .storePromotion .adv-input {
    width: 300px !important;
    height: 40px !important;
  }

  .storePromotion .adv-item .time-line {
    display: inline-block;
    color: #DADADA;
    margin: 0 7px;
  }

  .storePromotion .pushBtn {
    display: inline-block;
    width: 120px;
    height: 40px !important;
    background-color: #57BDDE;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: relative;
    border: none;
  }

  .storePromotion .pushBtn:hover {
    background-color: #1dabd9;
    border-color: #1dabd9;
    color: #fff;
  }

  .storePromotion .pushBtn .el-icon-upload {
    margin-right: 8px;
  }

  .storePromotion .pushBtn span {
    /*border:1px solid red;*/
    display: inline-block;
    width: 120px;
    height: 40px !important;
    border-radius: 5px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .storePromotion .push_label {
    color: #C1CDD3;
    font-size: 12px;
    height: 13px;
    line-height: 13px;
    display: inline-block;
    margin-top: 16px;
  }

  .storePromotion .push_label:before {
    content: "*";
    color: #57BDDE;
    font-size: 14px;
    display: inline-block;
    width: 6px;
    height: 6px;
    height: 13px;
    line-height: 13px;
    margin-right: 3px;
  }

</style>
